<script setup>
	import Dialog from '../Layout/components/Dialog.vue'
	import Domain from './components/Domain.vue'
	import Help from './components/Help.vue'
	import TransferIn from './components/TransferIn.vue'
	import TransferOut from './components/TransferOut.vue'
	import {
		h,
		ref,
		reactive
	} from 'vue'
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'

	const activeTab = ref(0);
	const agree = ref(false)
	const dialogShow = ref(false);
	const domainShow = ref(false);
	const helpShow = ref(false);
	const transferInShow = ref(false);
	const transferOutShow = ref(false);

	const tableData = ref([{
		suffix: '.cn',
		suffix_desc: '全球顶级域名，中文国际顶级后缀，中国首选',
		vip: 36,
		vip1: 35,
		vip2: 34,
		vip3: 33
	}, {
		suffix: '.com',
		suffix_desc: '全球注册量第一顶级域名',
		vip: 100,
		vip1: 100,
		vip2: 95,
		vip3: 95
	}, {
		suffix: '.vip',
		suffix_desc: '全球顶级域名，奢华仰止，域名中的劳斯莱斯',
		vip: 100,
		vip1: 90,
		vip2: 80,
		vip3: 70
	}, {
		suffix: '.net',
		suffix_desc: '全球顶级域名，科技公司，网络公司热衷',
		vip: 139,
		vip1: 100,
		vip2: 95,
		vip3: 94
	}, {
		suffix: '.cc',
		suffix_desc: '简单好记，极具商业潜力',
		vip: 80,
		vip1: 75,
		vip2: 70,
		vip3: 65
	}, {
		suffix: '.com.cn',
		suffix_desc: '全球顶级域名，国际范，全球范',
		vip: 36,
		vip1: 35,
		vip2: 34,
		vip3: 33
	}, {
		suffix: '.org.cn',
		suffix_desc: '全球顶级域名，适用于国内公益组织、官方机构',
		vip: 36,
		vip1: 35,
		vip2: 34,
		vip3: 33
	}, {
		suffix: '.net.cn',
		suffix_desc: '全球顶级后缀，中文国际域名，国际范，全球范',
		vip: 36,
		vip1: 35,
		vip2: 34,
		vip3: 33
	}, {
		suffix: '.top',
		suffix_desc: '站更高，看更远',
		vip: 36,
		vip1: 36,
		vip2: 36,
		vip3: 36
	}, {
		suffix: '在线',
		suffix_desc: '符合中国文化的在线中文域名',
		vip: 2000,
		vip1: 2000,
		vip2: 2000,
		vip3: 1800
	}])

	const tableData2 = ref([{
		name: 'dz80.com',
		email: 'test@190.vip',
		fee: 60,
		time: '2024-11-11 17:06:21',
		status: 0
	}, {
		name: 'zbb0.cn',
		email: 'test@190.vip',
		fee: 60,
		time: '2024-11-11 17:06:21',
		status: 1
	}, {
		name: 'zealand.com.cn',
		email: 'test@190.vip',
		fee: 60,
		time: '2024-11-11 17:06:21',
		status: 2
	}, {
		name: 'dz80.com',
		email: 'test@190.vip',
		fee: 60,
		time: '2024-11-11 17:06:21',
		status: 3
	}, {
		name: 'dz80.com',
		email: 'test@190.vip',
		fee: 60,
		time: '2024-11-11 17:06:21',
		status: 0
	}, {
		name: 'zbb0.cn',
		email: 'test@190.vip',
		fee: 60,
		time: '2024-11-11 17:06:21',
		status: 1
	}, {
		name: 'zealand.com.cn',
		email: 'test@190.vip',
		fee: 60,
		time: '2024-11-11 17:06:21',
		status: 2
	}, {
		name: 'dz80.com',
		email: 'test@190.vip',
		fee: 60,
		time: '2024-11-11 17:06:21',
		status: 3
	}, {
		name: 'dz80.com',
		email: 'test@190.vip',
		fee: 60,
		time: '2024-11-11 17:06:21',
		status: 0
	}, {
		name: 'zbb0.cn',
		email: 'test@190.vip',
		fee: 60,
		time: '2024-11-11 17:06:21',
		status: 1
	}])

	const tableData3 = ref([{
		name: 'dz80.com',
		email: 'test@190.vip',
		time: '2024-11-11 17:06:21',
		status: 0
	}, {
		name: 'zbb0.cn',
		email: 'test@190.vip',
		time: '2024-11-11 17:06:21',
		status: 1
	}, {
		name: 'zealand.com.cn',
		email: 'test@190.vip',
		time: '2024-11-11 17:06:21',
		status: 2
	}, {
		name: 'dz80.com',
		email: 'test@190.vip',
		time: '2024-11-11 17:06:21',
		status: 3
	}, {
		name: 'dz80.com',
		email: 'test@190.vip',
		time: '2024-11-11 17:06:21',
		status: 4
	}, {
		name: 'zbb0.cn',
		email: 'test@190.vip',
		time: '2024-11-11 17:06:21',
		status: 5
	}, {
		name: 'dz80.com',
		email: 'test@190.vip',
		time: '2024-11-11 17:06:21',
		status: 0
	}, {
		name: 'zbb0.cn',
		email: 'test@190.vip',
		time: '2024-11-11 17:06:21',
		status: 1
	}, {
		name: 'zealand.com.cn',
		email: 'test@190.vip',
		time: '2024-11-11 17:06:21',
		status: 2
	}, {
		name: 'dz80.com',
		email: 'test@190.vip',
		time: '2024-11-11 17:06:21',
		status: 3
	}, {
		name: 'dz80.com',
		email: 'test@190.vip',
		time: '2024-11-11 17:06:21',
		status: 4
	}, {
		name: 'zbb0.cn',
		email: 'test@190.vip',
		time: '2024-11-11 17:06:21',
		status: 5
	}])
	const queryForm = reactive({})
	const currentPage = ref(1)
	const total = ref(100)

	const switchTab = (tabId) => {
		activeTab.value = tabId;
	};

	const activeName = ref('first')

	const getStringLen = (str) => {
		if (str) {
			let arr = str.split('\n')
			return arr.length
		} else {
			return 0
		}
	}

	const placeholder = '多条域名请换行分隔，每次最多批量转入100条域名\n格式：域名+逗号+转移密码\n示例：190.vip,1234567'
	const form = reactive({})
	const form2 = reactive({})
	const handleSizeChange = (val) => {
		console.log(`${val} items per page`)
	}
	const handleCurrentChange = (val) => {
		console.log(`current page: ${val}`)
	}

	const addDomain = () => {
		domainShow.value = true
	}

	const openAgree = () => {
		dialogShow.value = true
	}

	const domainSelect = (e) => {
		domainShow.value = false
		form2.nameStr = e.join('\n')
	}

	const handelViews = (row) => {
		ElMessageBox({
			title: '',
			customClass: 'custom-message',
			icon: 'WarningFilled',
			message: h('div', null, [
				h('h4', null, '域名转入失败'),
				h('p', {
					style: 'color: #999999;margin-bottom:20px;'
				}, '失败原因'),
			]),
			showCancelButton: true,
			cancelButtonClass: 'custom-cancel',
			cancelButtonText: '需要帮助？',
			confirmButtonText: '知道了',
			type: 'error'
		}).then(() => {
			console.log(1)
		}).catch(() => {
			helpShow.value = true
		})
	}

	const handelViews2 = (row) => {
		ElMessageBox({
			title: '',
			customClass: 'custom-message',
			icon: 'WarningFilled',
			message: h('div', null, [
				h('h4', null, '域名转出中'),
				h('p', {
					style: 'color: #999999;margin-bottom:20px;'
				}, '注册局机构处理域名转移会在7个工作日内完成，请耐心等待'),
			]),
			confirmButtonText: '知道了',
			type: 'info'
		}).then(() => {

		})
	}

	const transferInClick = () => {
		transferInShow.value = true
	}

	const transferOutClick = () => {
		transferOutShow.value = true
	}
</script>
<template>
	<div class="container">
		<div class="page-title bold">域名转移</div>
		<div class="bs-panel">
			<el-row class="account-menu-list">
				<el-col :span="6">
					<div class="account-menu" @click="switchTab(0)">
						<img src="../../assets/images/people-left.png" alt="">
						<span>转入域名</span>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="account-menu" @click="switchTab(1)">
						<img src="../../assets/images/people-right.png" alt="">
						<span>转出域名</span>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="account-menu" @click="switchTab(2)">
						<img src="../../assets/images/file-right2.png" alt="">
						<span>转入记录</span>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="account-menu" @click="switchTab(3)">
						<img src="../../assets/images/file-right.png" alt="">
						<span>转出记录</span>
					</div>
				</el-col>
			</el-row>
		</div>
		<div v-if="activeTab == 0">
			<div class="bs-panel">
				<div class="bs-panel-body">
					<div class="bs-panel_hd">
						<div class="bs-panel_tt bold">转入域名</div>
					</div>
				</div>
				<div class="bs-panel-body" style="padding-top: 0;">
					<el-form :model="form" label-width="90px" label-position="right" size="large">
						<el-form-item label="域名信息">
							<div class="wrapdmTextarea textarea-box">
								<div class="textarea-warp" style="z-index: 200; top: 0;">
									<textarea id="textarea" :placeholder="placeholder"
										class="ui-input dmTextarea dmTyping" name="domain" style="overflow-y: auto;"
										v-model="form.nameStr"></textarea>
									<div class="textarea-limit">
										{{getStringLen(form.nameStr)}}/100
									</div>
								</div>
							</div>
							<div class="textarea-tip">如需转入的域名较多，可使用记事本、Excel、Word等软件编辑，复制后粘贴到输入框中。</div>
						</el-form-item>
						<el-form-item label="DNS设置">
							<el-radio-group v-model="form.dns">
								<el-radio :value="0">原DNS</el-radio>
								<el-radio :value="1">190 DNS</el-radio>
							</el-radio-group>
						</el-form-item>
						<div class="form-foot">
							<div class="form-agree">
								<el-checkbox v-model="agree" label="我已同意并阅读" />
								<el-button link class="agree-btn" @click="openAgree">《域名转移服务协议》</el-button>
							</div>
							<div class="form-submit">
								<el-button type="warning" @click="transferInClick">提交转入</el-button>
							</div>
						</div>
					</el-form>
				</div>
			</div>
			<div class="bs-panel">
				<div class="bs-panel-body">
					<el-tabs v-model="activeName" class="demo-tabs">
						<el-tab-pane label="转入流程" name="first">
							<div class="step">
								<div class="step-item">
									<div class="step-item-left">
										<div class="num">1</div>
									</div>
									<div class="step-item-content">

										<div class="title">填写域名信息</div>
										<div class="desc">填写您想转入的域名及对应的转移密码，转移密码可向原注册商提交转出后获取</div>
									</div>
								</div>
								<div class="step-line"></div>
								<div class="step-item">
									<div class="step-item-left">
										<div class="num">2</div>
									</div>
									<div class="step-item-content">
										<div class="title">域名转入续费</div>
										<div class="desc">转入后需为该域名续费一年，不同后缀的域名续费价格不同</div>
									</div>
								</div>
								<div class="step-line"></div>
								<div class="step-item">
									<div class="step-item-left">
										<div class="num">3</div>
									</div>
									<div class="step-item-content" style="width: 160px;">
										<div class="title">邮箱验证（仅国际域名）</div>
										<div class="desc">转入com等国际域名，系统发送确认邮件至域名所有者邮箱，需在15日内点击链接进行确认</div>
									</div>
								</div>
								<div class="step-line"></div>
								<div class="step-item">
									<div class="step-item-left">
										<div class="num">4</div>
									</div>
									<div class="step-item-content">
										<div class="title">转入处理</div>
										<div class="desc">验证通过后，域名开始转入190。7天后域名成功转入并过户至您的默认模板下</div>
									</div>
								</div>
							</div>
						</el-tab-pane>
						<el-tab-pane label="转入规则" name="second">
							<div class="rule-box">
								<div class="top-notice">
									<el-alert title="域名转入(Domain Transfer）又称域名转移注册商，即将某域名从当前的注册商转出，转入到190进行管理。"
										type="warning" show-icon></el-alert>
								</div>
								<div class="title">转入的域名需要符合以下转入规则</div>
								<ul>
									<li>转入域名时如提示“注册商转移保护”，请联系域名现所在注册商对域名进行解锁。</li>
									<li>国际域名转入请确认距最后一次续费已满60天，否则有可能会出现转入成功续费掉年的现象。</li>
									<li>域名到期前15天不能转入。</li>
									<li>域名处于纠纷、仲裁中或法院限制转出的不能转入。</li>
								</ul>
							</div>
						</el-tab-pane>
						<el-tab-pane label="转入价格" name="third">
							<div class="rule-box">
								<div class="top-notice">
									<el-alert title="域名转入本身免费，根据注册机构相关规定，域名转移注册商必须将域名的到期日延续一年。域名转入190时，您需交纳一年的续费费用。"
										type="warning" show-icon></el-alert>
								</div>
								<el-table :data="tableData" style="width: 100%" show-overflow-tooltip>
									<el-table-column prop="suffix" label="域名后缀" width="100" align="center">
									</el-table-column>
									<el-table-column prop="suffix_desc" label="后缀介绍">
									</el-table-column>
									<el-table-column prop="vip" label="普通会员" width="120" align="center">
									</el-table-column>
									<el-table-column prop="vip1" label="金牌会员" width="120" align="center">
									</el-table-column>
									<el-table-column prop="vip2" label="钻石会员" width="120" align="center">
									</el-table-column>
									<el-table-column prop="vip3" label="皇冠会员" width="120" align="center">
									</el-table-column>
								</el-table>
							</div>
						</el-tab-pane>
					</el-tabs>
				</div>
			</div>
			<Dialog v-model:dialogShow="dialogShow" title="域名转移服务协议" content="" />
		</div>
		<div v-if="activeTab == 1">
			<div class="bs-panel">
				<div class="bs-panel-body">
					<div class="bs-panel_hd">
						<div class="bs-panel_tt bold">转出域名</div>
					</div>
				</div>
				<div class="bs-panel-body" style="padding-top: 0;">
					<el-form :model="form2" label-width="116px" label-position="right" size="large">
						<div class="el-form-item">
							<div class="el-form-item__label form-column">
								<div style="margin-left: auto;">要转出的域名</div>
								<div class="domain-select">从<el-button link @click="addDomain">我的域名</el-button>选择</div>
							</div>
							<div class="el-form-item__content">
								<div class="wrapdmTextarea textarea-box">
									<div class="textarea-warp" style="z-index: 200; top: 0;">
										<textarea id="textarea" placeholder="多条域名请换行分隔，每次最多批量转出100条域名"
											class="ui-input dmTextarea dmTyping" name="domain" style="overflow-y: auto;"
											v-model="form2.nameStr"></textarea>
										<div class="textarea-limit">
											{{getStringLen(form2.nameStr)}}/100
										</div>
									</div>
								</div>
								<div class="textarea-tip">
									若域名使用的是190DNS，需在转出完成前将域名的DNS修改为新服务商的DNS并做好解析，避免域名转出后无法正常解析。</div>
							</div>
						</div>
						<el-form-item label="转出原因">
							<el-select v-model="form2.reason" placeholder="请选择" style="width: 240px">
								<el-option label="域名出售了" :value="0"></el-option>
								<el-option label="解析服务不稳定" :value="1"></el-option>
								<el-option label="功能不完善" :value="3"></el-option>
								<el-option label="交易不方便" :value="4"></el-option>
								<el-option label="续费价格不合理" :value="5"></el-option>
								<el-option label="其他原因" :value="6"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<div class="form-submit">
								<el-button type="warning" @click="transferOutClick">提交转出</el-button>
							</div>
						</el-form-item>
					</el-form>
				</div>
			</div>
			<div class="bs-panel">
				<div class="bs-panel-body">
					<el-tabs v-model="activeName" class="demo-tabs">
						<el-tab-pane label="转出流程" name="first">
							<div class="step">
								<div class="step-item">
									<div class="step-item-left">
										<div class="num">1</div>
									</div>
									<div class="step-item-content">
										<div class="title">提交转出申请</div>
										<div class="desc">将需要转出的域名提交给190，并通过安全验证</div>
									</div>
								</div>
								<div class="step-line"></div>
								<div class="step-item">
									<div class="step-item-left">
										<div class="num">2</div>
									</div>
									<div class="step-item-content">
										<div class="title">获取转移密码</div>
										<div class="desc">190会将域名的转移密码发送至域名所有者的邮箱，请注意查收</div>
									</div>
								</div>
								<div class="step-line"></div>
								<div class="step-item">
									<div class="step-item-left">
										<div class="num">3</div>
									</div>
									<div class="step-item-content" style="width: 160px;">
										<div class="title">提交转入申请</div>
										<div class="desc">在其他注册商发起域名转入申请，按照要求提供转移密码，并完成转入流程
										</div>
									</div>
								</div>
								<div class="step-line"></div>
								<div class="step-item">
									<div class="step-item-left">
										<div class="num">4</div>
									</div>
									<div class="step-item-content">
										<div class="title">确认转出</div>
										<div class="desc">190发送域名转出确认邮件到域名注册人邮箱中，确认后域名将转出190</div>
									</div>
								</div>
							</div>
						</el-tab-pane>
						<el-tab-pane label="转出条件" name="second">
							<div class="rule-box">
								<div class="title">转出的域名需要满足以下转出条件</div>
								<ul>
									<li>域名注册满60天后可以办理转移注册商。</li>
									<li>cn/top/wang等域名距离到期前16天以上可以办理转移，域名到期时间不足16天不能办理转出。</li>
									<li>国际域名在续费后60天内转入到新注册商，可能续费不会增加一年，建议等待续费满60天后再办理转移。转移密码有效时间为5天，请在有效期内操作转移，如过期不操作自动视为放弃转移。
									</li>
									<li>设置了隐私保护的域名，获取转移密码前要先取消隐私保护。</li>
									<li>获取转移密码到邮箱里，可能会由于网络延迟或邮件过滤设置等原因，导致邮件延迟或收不到，建议可以垃圾邮件中查看下，或更改邮件过滤设置。</li>
									<li>若有任何疑问，请联系域名专员协助解决：联系电话: 0755-2955 6666 邮箱: kf@190.vip</li>
								</ul>
							</div>
						</el-tab-pane>
					</el-tabs>
				</div>
			</div>
		</div>
		<div v-if="activeTab == 2">
			<div class="bs-panel table-box">
				<div class="bs-panel-body">
					<div class="table-tool">
						<div class="tool-left">
							<span class="selected">
								搜索结果共{{total}}条
							</span>
						</div>
						<div class="tool-right">
							<el-input v-model="queryForm.search" style="width: 240px" placeholder="输入关键词查询" clearable
								prefix-icon="Search"></el-input>
						</div>
					</div>
					<el-table :data="tableData2" style="width: 100%" show-overflow-tooltip>
						<el-table-column type="index" label="序号" width="100" align="center"></el-table-column>
						<el-table-column prop="name" label="域名" width="200">
						</el-table-column>
						<el-table-column prop="email" label="whois邮箱"></el-table-column>
						<el-table-column prop="fee" label="转入费用" align="center">
							<template #default="scope">￥{{scope.row.fee}}</template>
						</el-table-column>
						<el-table-column prop="time" label="提交时间" align="center" width="200">
						</el-table-column>
						<el-table-column prop="status" align="center" width="130">
							<template #header>
								<el-select v-model="form.status" placeholder="状态" style="width: 100px">
									<el-option label="待验证" :value="0"></el-option>
									<el-option label="转入中" :value="1"></el-option>
									<el-option label="已转入" :value="2"></el-option>
									<el-option label="转入失败" :value="3"></el-option>
								</el-select>
							</template>
							<template #default="scope">
								<span v-if="scope.row.status == 0" class="td-error">待验证</span>
								<span v-if="scope.row.status == 1" class="td-purple">转入中</span>
								<span v-if="scope.row.status == 2" class="td-success">已转入</span>
								<span v-if="scope.row.status == 3" class="td-gray">转入失败</span>
							</template>
						</el-table-column>
						<el-table-column align="center" label="操作" width="140">
							<template #default="scope">
								<div class="operate-btns">
									<el-button link v-if="scope.row.status != 2"
										@click="handelViews(scope.row)">查看</el-button>
									<span v-else>-</span>
								</div>
							</template>
						</el-table-column>
					</el-table>
					<div class="pager-box">
						<span></span>
						<el-pagination v-model:current-page="currentPage" :page-size="10" :background="true"
							:page-sizes="[10, 20, 50]" layout="prev, pager, next,sizes,jumper" :total="total"
							@size-change="handleSizeChange" @current-change="handleCurrentChange" />
					</div>
				</div>
			</div>
		</div>
		<div v-if="activeTab == 3">
			<div class="bs-panel table-box">
				<div class="bs-panel-body">
					<div class="table-tool">
						<div class="tool-left">
							<span class="selected">
								搜索结果共{{total}}条
							</span>
						</div>
						<div class="tool-right">
							<el-input v-model="form.search" style="width: 240px" placeholder="输入关键词查询" clearable
								prefix-icon="Search"></el-input>
						</div>
					</div>
					<el-table :data="tableData3" style="width: 100%" show-overflow-tooltip>
						<el-table-column type="index" label="序号" width="100" align="center"></el-table-column>
						<el-table-column prop="name" label="域名"></el-table-column>
						<el-table-column prop="email" label="whois邮箱"></el-table-column>
						<el-table-column prop="time" label="提交时间" align="center">
						</el-table-column>
						<el-table-column prop="status" align="center" width="130">
							<template #header>
								<el-select v-model="form.status" placeholder="状态" style="width: 100px">
									<el-option label="待转出" :value="0"></el-option>
									<el-option label="待验证" :value="1"></el-option>
									<el-option label="转出中" :value="2"></el-option>
									<el-option label="转出失败" :value="3"></el-option>
									<el-option label="已转出" :value="4"></el-option>
									<el-option label="已转出" :value="5"></el-option>
								</el-select>
							</template>
							<template #default="scope">
								<span v-if="scope.row.status == 0" class="td-error">待转出</span>
								<span v-if="scope.row.status == 1" class="td-error">待验证</span>
								<span v-if="scope.row.status == 2" class="td-purple">转出中</span>
								<span v-if="scope.row.status == 3" class="td-gray">转出失败</span>
								<span v-if="scope.row.status == 4" class="td-success">已转出</span>
								<span v-if="scope.row.status == 5" class="td-gray">已关闭</span>
							</template>
						</el-table-column>
						<el-table-column align="center" label="操作">
							<template #default="scope">
								<div class="operate-btns"
									v-if="scope.row.status == 0 || scope.row.status == 2 || scope.row.status == 3">
									<el-button link @click="handelViews2(scope.row)">查看</el-button>
								</div>
								<div class="operate-btns" v-else-if="scope.row.status == 1">
									<el-button link>验证</el-button>
								</div>
								<div v-else>-</div>
							</template>
						</el-table-column>
					</el-table>
					<div class="pager-box">
						<el-pagination v-model:current-page="currentPage" :page-size="50" :background="true"
							:page-sizes="[10, 20, 50]" layout="prev, pager, next,sizes,jumper" :total="total"
							@size-change="handleSizeChange" @current-change="handleCurrentChange" />
					</div>
				</div>
			</div>
		</div>
		<TransferIn v-model:show="transferInShow"></TransferIn>
		<TransferOut v-model:show="transferOutShow"></TransferOut>
		<Domain v-model:show="domainShow" @submit="domainSelect"></Domain>
		<Help v-model:show="helpShow"></Help>
	</div>
</template>
<style scoped lang="scss">
	.textarea-box {
		width: 100%;
		height: 102px;
	}


	.textarea-limit {
		position: absolute;
		right: 0;
		bottom: 0;
	}

	.dmTextarea.dmTyping {
		height: 100px;
	}

	.textarea-tip {
		color: #666;
		font-size: 12px;
	}

	.form-foot {
		padding-left: 90px;
		border-top: 1px solid #d3d7dc;
		padding-top: 20px;
	}

	.form-agree {
		display: flex;
		align-items: center;
		margin-bottom: 15px;

		.agree-btn {
			padding: 8px 2px;
		}

		.agree-btn:hover {
			color: #F68A0C;
			text-decoration: underline;
		}
	}

	.step {
		display: flex;
		margin-top: 30px;

		.step-item {
			display: flex;

			.step-item-left {
				width: 30px;
				margin-right: 10px;

				.num {
					width: 30px;
					height: 30px;
					border: 1px solid #F68A0C;
					border-radius: 30px;
					color: #F68A0C;
					text-align: center;
					line-height: 30px;
				}
			}

			.step-item-content {
				width: 130px;

				.title {
					font-size: 14px;
					color: #F68A0C;
					text-align: center;
					line-height: 30px;
				}

				.desc {
					font-size: 12px;
					color: #666;
					text-align: center;
					width: 130px;
				}
			}
		}

		.step-line {
			width: 150px;
			height: 1px;
			background-color: #F68A0C;
			margin-top: 14px;
			margin-right: 20px;
		}
	}

	.rule-box {
		.title {
			font-size: 17px;
			font-weight: 700;
			margin-bottom: 16px;
			padding-left: 22px;
		}

		li {
			margin-bottom: 16px;


			&::before {
				content: '●';
				font-size: 12px;
				margin-right: 16px;
			}
		}
	}

	.form-column {
		flex-direction: column;
		justify-content: flex-start;
	}

	.domain-select .el-button {
		vertical-align: baseline;
		color: rgb(0, 0, 255) !important;
	}

	.domain-select .el-button:hover {
		text-decoration: underline;
	}

	.form-submit .el-button {
		width: 140px;
	}
</style>